<template>
  <div class="brand-list">
    <!-- <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>交友品牌
    </div> -->
    <div class="brand-top"></div>
    <div class="section">
      <div class="content">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div class="item-box" v-if="list.length > 0">
              <div
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="goBrandHome(item.id)"
              >
                <div class="brand-logo">
                  <img v-lazy="ImgDomin(item.logoImg)" alt="" />
                  <span>{{ item.brandName }}</span>
                </div>
                <div class="intro">{{ item.introduce }}</div>
              </div>
            </div>
            <div class="empty" v-else>
              <img
                style="width: 100%"
                src="../assets/img/common-empty.png"
                alt=""
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { getBrandList } from "@/api/brand";
export default {
  data() {
    return {
      params: {
        current: 1,
        size: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      finishedText: "没有更多了",
    };
  },
  methods: {
    onLoad() {
      getBrandList(this.params)
        .then((res) => {
          if (res.code == 0) {
            let data = res.data;
            if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }

            if (this.params.current == 1) {
              this.list = data.records;
            } else {
              this.list = this.list.concat(data.records);
            }
            this.loading = false;

            if (this.list.length >= data.total) {
              this.finished = true;
            } else {
              this.params.current++;
            }
            if (this.list.length == 0) this.finishedText = "暂无数据";
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    onRefresh() {
      this.params.current = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 进入品牌首页
    goBrandHome(id) {
      this.$router.push({ name: "BrandHome", query: { id: id } });
    },
  },
};
</script>
<style lang="less">
.brand-list {
  background: #f6f6f6;
  min-height: 100vh;
  .brand-top {
    width: 100%;
    height: 212px;
    background: url("../assets/img/brand-top.png") no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .content {
    padding: 0 15px;
    margin-top: -50px;
    .item-box {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 5px;
        padding: 15px;
        .brand-logo {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          margin-right: 15px;
          width: 80px;
          img {
            width: 45px;
            height: 45px;
            margin-bottom: 8px;
          }
          span {
            font-size: 13px;
            color: #222222;
            text-align: center;
          }
        }
        .intro {
          font-size: 12px;
          line-height: 1.5;
          color: #d0d0d0;
          flex: 1;
        }
      }
    }
  }
}
</style>
